<template>
  <el-dialog
    title="用户切换部门记录"
    :visible.sync="dialogVisible"
    width="65%"
    top="10vh"
    :before-close="closeUserMoveViewDialogHandle"
    :close-on-click-modal="false"
    class="user-move-view-dialog"
  >
    <el-form inline :model="user" label-width="80px">
      <el-form-item label="用户名称:">
        <span :style="{ color: themeColor }">{{ user.username }}</span>
      </el-form-item>
      <el-form-item label="当前部门:">
        <span :style="{ color: themeColor }">{{ user.deptName }}</span>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="dataLoad"
      element-loading-text="用户切换部门记录数据加载中"
      element-loading-spinner="el-icon-loading"
      stripe
      :data="userMoveList"
      ref="userMoveTable"
    >
      <el-table-column prop="username" header-align="center" align="center" label="用户名称"></el-table-column>
      <el-table-column prop="preDeptName" header-align="center" align="center" label="原部门"></el-table-column>
      <el-table-column prop="nextDeptName" header-align="center" align="center" label="新部门"></el-table-column>
      <el-table-column prop="moveMode" header-align="center" align="center" label="切换模式" :formatter="moveModeFormatter"></el-table-column>
      <el-table-column prop="moveRemark" header-align="center" align="center" label="切换原因"></el-table-column>
      <el-table-column prop="createTime" header-align="center" align="center" label="切换时间"></el-table-column>
      <el-table-column prop="createUser" header-align="center" align="center" label="操作用户">
      </el-table-column>
    </el-table>
    <!-- 表格分页插件 -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-size="pageSize"
      :total="totalNum"
      :disabled="dataLoad"
      layout="total, prev, pager, next, jumper"
      class="paging">
    </el-pagination>
  </el-dialog>
</template>

<script>
  export default {
    name: "user-move-view",
    props: {
      // 弹出框是否显示
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 用户对象
        user: {
          // 用户主键
          userId: undefined,
          // 用户名称
          username: undefined,
          // 部门名称
          deptName: undefined,
        },
        // 用户切换部门记录数据
        userMoveList: [],
        // 当前展示页码
        pageIndex: 1,
        // 当前页显示个数
        pageSize: 8,
        // 当前用户切换部门记录数量
        totalNum: 0,
        // 数据是否加载[false-不加载 true-加载]
        dataLoad: false,
      }
    },
    computed: {
      // 主题颜色
      themeColor() {
        return this.$store.state.settings.theme
      },
    },
    methods: {
      /**
       * 初始化用户切换部门记录弹出框方法
       * @param {Object} user 用户对象
       */
      initUserMoveViewDialog(user) {
        this.user = user;

        this.getUserMoveList();
      },
      /**
       * 获取用户切换部门记录数
       */
      getUserMoveList() {
        // 开始用户切换部门记录数据加载
        this.dataLoad = true;
        let formObj = {
          userId: this.user.userId,
          page: this.pageIndex,
          limit: this.pageSize
        }
        this.$axios.$get('/sys/user-dept/flow/page/list', { params: formObj })
          .then(({ data:page }) => {
            this.userMoveList = page.list;
            this.totalNum = page.totalNum;
          })
          .catch(() => {})
          .finally(() => {
            // 用户切换部门记录数据加载结束
            this.dataLoad = false;
          })
      },
      /**
       * 切换模式字段值枚举映射方法
       * @param row
       * @param column
       * @param cellValue
       * @param index
       */
      moveModeFormatter(row, column, cellValue, index) {
        console.log('cellValue', cellValue);
        switch (cellValue) {
          case 0:
            return '单个用户'
          case 1:
            return '批量切换'
          case 2:
            return '集体切换'
        }
        return "未知切换模式";
      },
      // 每页显示个数变化事件
      sizeChangeHandle(size) {
        this.pageIndex = 1
        this.pageSize = size

        this.getUserMoveList()
      },
      // '点击特定页码'、'上一页'、'下一页'操作事件
      currentChangeHandle(index) {
        if (this.pageIndex === index) {
          return
        }
        this.pageIndex = index
        this.getUserMoveList()
      },
      /**
       * 关闭用户切换部门记录弹出框事件
       */
      closeUserMoveViewDialogHandle() {
        this.user = {
          userId: undefined,
          username: undefined,
          deptName: undefined,
        }
        this.userMoveList = []
        this.pageIndex = 1;
        this.totalNum = 0
        // 向上传递事件
        this.$emit('close-user-move-view-dialog');
      }
    }
  }
</script>

<style scoped>
  .user-move-view-dialog >>> .el-dialog__body {
    padding: 10px 20px;
  }
  .user-move-view-dialog .paging {
    text-align: right;
    margin: 7px 7px 0 0;
  }
</style>
